import React from 'react';
import ProDescriptions from '@ant-design/pro-descriptions';
import { Button, Drawer, Image } from 'antd';
import { connect, FormattedMessage } from 'umi';
import moment from 'moment';
import { getItem } from '@/services/item/item';

const DescriptionDrawer = (props) => {
  const { dispatch, showDetail, currentRow } = props;

  return (
    <Drawer
      width={800}
      visible={showDetail}
      onClose={() => {
        dispatch({
          type: 'myItemList/setShowDetail',
          payload: { showDetail: false, currentRow: undefined },
        });
      }}
      closable={false}
    >
      {currentRow?.id && (
        <>
          <ProDescriptions
            column={2}
            title={currentRow?.name}
            request={() => getItem({ itemID: currentRow.id })}
            columns={[
              {
                title: <FormattedMessage id="pages.work.workList.title" />,
                dataIndex: 'name',
              },
              {
                title: '存证用户',
                dataIndex: 'creator',
                render: (_, record) => {
                  return record.creator.username;
                },
              },
              {
                title: '区块链地址',
                dataIndex: 'account',
                render: (_, record) => {
                  return record.creator.address;
                },
              },
              {
                title: <FormattedMessage id="pages.work.workList.createdAt" />,
                dataIndex: 'createdAt',
                valueType: 'dateTime',
              },
              {
                title: <FormattedMessage id="pages.work.workList.category" />,
                dataIndex: 'category',
                valueType: 'select',
                valueEnum: {
                  1: '文字作品',
                  2: '图片作品',
                  3: '视频作品',
                },
                span: 2,
              },
              {
                title: <FormattedMessage id="pages.work.workList.abstract" />,
                dataIndex: 'description',
                span: 2,
              },
            ]}
            bordered={true}
            extra={
              <>
                <Button type="primary" key="download">
                  下载证书
                </Button>
                <Button key="preview">文件预览</Button>
              </>
            }
          />

          <ProDescriptions
            style={{ marginTop: 40 }}
            column={2}
            request={() => getItem({ itemID: currentRow.id })}
            bordered={true}
            columns={[
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.name" />,
                dataIndex: 'fileName',
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.size" />,
                dataIndex: 'fileSize',
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.type" />,
                dataIndex: 'fileType',
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.blockTime" />,
                dataIndex: 'blockTime',
                valueType: 'dateTime',
                render: (_, record) => {
                  return moment.unix(record.trades[0].blockTime).format('YYYY-MM-DD HH:mm:ss');
                },
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.chainName" />,
                dataIndex: 'chainName',
                valueType: 'text',
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.blockNumber" />,
                render: (_, record) => {
                  return record.trades[0].blockNumber;
                },
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.hash" />,
                dataIndex: 'fileHash',
                span: 2,
              },
              {
                title: <FormattedMessage id="pages.work.workList.fileColumns.txHash" />,
                span: 2,
                render: (_, record) => {
                  return record.trades[0].txHash;
                },
              },
            ]}
          />
          <Image
            style={{ marginTop: 40 }}
            preview={false}
            src={`http://localhost:8080/api/getCertificate?fileHash=${currentRow.fileHash}`}
          />
        </>
      )}
    </Drawer>
  );
};

export default connect(({ user, myItemList }) => ({
  currentUser: user.currentUser,
  showDetail: myItemList.showDetail,
  currentRow: myItemList.currentRow,
}))(DescriptionDrawer);
